<style lang="scss" scoped>
  .check-in {
    background-color: #FFF5E0;
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
    overflow: hidden;
  }
  .top {
    color: #FFF5E0;
    position: absolute;
    top: 10px;
    right: 10px;
    a {
      color: #FFF5E0;
      text-decoration: none;
    }
  }

  .main {
    width: 77%;
    margin: 38% auto 10%;
  }

  #step-1 {
    //display: none;
    height: 6.5em;
  }

  #step-2 {
    //display: none;
    height: 6.5em;
    p {
      margin: 0.5em 0 0;
      color: #fff5e0;
      font-size: 1.25em;
      text-align: center;
      letter-spacing: 0.1em;
      span {
        font-size: 3em;
        margin: 0 0.1em;
      }
    }
  }

  .checkin-button {
    display: block;
    //width: 40%;
    height: 100%;
    margin: 0 auto;
  }

  .checkin-checked {
    display: block;
    width: 90%;
    margin: 0 auto;
  }

  .now {
    height: 2.5em;
    color: #fff5e0;
    font-size: 1.2em;
    line-height: 2.5em;
    text-align: center;
  }

  .rules {
    .rules-hd {
      margin-bottom: 2.5em;
      text-align: center;
      h2 {
        display: inline-block;
        margin: 0;
        padding: 0.5em 1.5em;
        color: #ffffff;
        background-color: #FF8400;
        border-radius: 1.5em;
        font-weight: normal;
      }

      &:after {
        content: '';
        display: block;
        margin-top: -1.5em;
        width: 100%;
        height: 1px;
        background-color: #FF8400;
      }
    }

    .rules-bd {
      padding: 0 2em;
      ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        li {
          margin-bottom: 1em;
          background-color: #fff;
          border-radius: 5px;
          box-shadow: 0 1px 2px #cccccc;
          .rules-num {
            margin: 0;
            padding: 0.25em;
            display: inline-block;
            vertical-align: middle;
            border-right: 1px solid #FF8400;
            color: #FF8400;
          }
          .rules-details {
            margin: 0;
            padding: 0.5em;
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
    }
  }

  .go-vip {
    margin: 2em 0;
    text-align: center;
    a {
      display: inline-block;
      padding: 0.5em 1.5em;
      color: #FF8400;
      border: 1px solid #FF8400;
      border-radius: 1.5em;
      text-decoration: none;
    }
  }

  #tip {
    /*display: none;*/
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(#000, 0.4);
    .inner {
      width: 80%;
      margin: 50% auto 0;
    }

    .tip-hd {
      img {
        display: block;
        width: 100%;
      }
    }

    .tip-bd {
      overflow: hidden;
      width: 70%;
      background-color: #fff;
      margin: -2% auto 0;
      padding: 1em;
      text-align: center;
    }

    .line-1 {
      color: #999;
      //text-align: center;
    }
    .line-2 {
      color: #E43842;
      font-size: 1.2em;
      //text-align: center;
    }
    .line-3 {
      color: #E43842;
    }
    .tip-button {
      display: inline-block;
      margin: 0;
      padding: 0.5em 2.5em;
      color: #ffffff;
      background-color: #FF8400;
      border-radius: 1.5em;
      font-weight: normal;
      text-decoration: none;
      box-shadow: 0 1px 0 darken(#ff8400, 10%);
    }
  }
</style>
<template>
  <div class="check-in" :style="{ height: height + 'px' }"
       style="background-image: url('./static/img/checkin_bg.png');">
    <div class="top">
      <span>{{ allmoney }}V币</span><br><a v-link="'/recharge'">去充值&raquo;</a>
    </div>
    <div class="main">
      <div id="step-1" v-show="showStep1">
        <a href="#" @click.prevent="goCheck()">
          <img src="../../static/img/checkin_button.png"
               alt="签到"
               class="checkin-button">
        </a>
      </div>
      <div id="step-2" v-show="showStep2">
        <img src="../../static/img/checkin_checked.png" alt="已签到"
             class="checkin-checked">
        <p>连续<span>{{ days }}</span>天</p>
      </div>
      <div class="now">{{ now }}</div>
    </div>

    <div class="rules">
      <div class="rules-hd">
        <h2>签到规则</h2>
      </div>
      <div class="rules-bd">
        <ul>
          <li>
            <h1 class="rules-num">01</h1><p class="rules-details">每天签到将获得0.05V币</p>
          </li>
          <li>
            <h1 class="rules-num">02</h1><p class="rules-details">连续签到5天可额外获得0.25V币</p>
          </li>
          <li>
            <h1 class="rules-num">03</h1><p class="rules-details">1V币=1元, V币可以当钱花</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="go-vip">
      <a href="http://www.vipbanlv.com">立即进入会员世界》</a>
    </div>

    <div id="tip" v-show="showTip">
      <div class="inner">
        <div class="tip-hd"><img src="../../static/img/checkin_tip.png"
                                 alt="签到成功"></div>
        <div class="tip-bd">
          <p class="line-1">已成功签到{{ days }}天</p>
          <p class="line-2">恭喜你, 获得{{ vmoney }}V币</p>
          <p class="line-3" v-if="parseInt(days) >= 5">连续签到{{ days }}天, 额外获得{{
            extraVmoney }}V币</p>
          <a href="#" class="tip-button" @click.prevent="closeTip()">确定</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script scoped>
  // import _ from 'lodash'
  import Uid from '../assets/utils/uid.js'
  import api from '../assets/utils/api.js'
  export default {
    data () {
      return {
        title: '签到',
        height: 800,
        showStep1: true,
        showStep2: false,
        showTip: false,
        days: 0,
        vmoney: 0.00,
        allmoney: 0,
        extraVmoney: 0.00
      }
    },
    computed: {
      now () {
        const now = new Date()
        const year = now.getFullYear()
        const month = now.getMonth() + 1
        const date = now.getDate()
        return `${year}年${month}月${date}日`
      }
    },
    methods: {
      isChecked () {
        // const uid = _.isNil(Uid.getUid()) ? '1' : Uid.getUid().uid
        Uid.getUid().then(res => {
          const uid = res.uid
          return api.apiCall('isChecked', {
            uid: uid
          }).then(data => {
            switch (data.returncode) {
              case 0:
                let issign = !!(data.issign)
                this.allmoney = data.allmoney
                this.days = data.days
                // this.days = '5'
                this.showTip = false
                this.showStep1 = !issign
                this.showStep2 = issign
                break
              case -1:
                console.error('用户参数不正确')
                break
            }
          })
        })
      },
      goCheck () {
        // const uid = Uid.getUid().uid || '1'
        Uid.getUid().then(res => {
          const uid = res.uid
          return api.apiCall('checkIn', {
            uid: uid
          }).then(data => {
            switch (data.returncode) {
              case 1:
                this.showStep1 = false
                this.showStep2 = true
                this.showTip = true
                this.days = data.days
                this.vmoney = data.vmoney
                this.allmoney = data.allmoney
                this.extraVmoney = data.extra_vmoney
                break
              case -1:
                break
              case -2:
                window.alert('今天已经签过到了')
                break
            }
          })
        })
      },
      closeTip () {
        this.showTip = false
      }
    },
    created () {
      // 初始化签到状态
      this.isChecked()
    },
    ready () {
      // 更改页面标题
      document.title = this.title
      const clientHeight = document.documentElement.clientHeight
      if (clientHeight >= 600) {
        this.height = document.documentElement.clientHeight
      }
    }
  }
</script>
